<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表 - 普通</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .container {
            margin: 50px;
        }

        .content {
            margin: 20px;
        }
    </style>
  </head>
  <body>
    <div id="Application">
        <div class="container">
            <div class="content">
                <input type="radio" :value="-1" v-model="sexFilter" />全部
                <input type="radio" :value="0" v-model="sexFilter" />男
                <input type="radio" :value="1" v-model="sexFilter" />女
                
            </div>
            <div class="content">
                搜索: <input type="text" v-model="searchKey" />
            </div>
            <div class="content">
                <table border="1" width="300px">
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                    <tr v-for="(data, index) in showDatas">
                        <td>{{data.name}}</td>
                        <td>{{data.sex==0?'男':'女'}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
  </body>

  <script>
    let mock = [{
        name:"小王",
        sex:0
    },{
        name:"小红",
        sex:1
    },{
        name:"小李",
        sex:1
    },{
        name:"小张",
        sex:0
    }]
    const App=Vue.createApp({
        data(){
          return {
            sexFilter: -1,
            showDatas: [],
            searchKey: ""
          }
        },
        methods:{
          queryAllData(){
            this.showDatas = mock
          },
          filterData(){
            this.searchKey = ""
            if(this.sexFilter == -1){
                this.showDatas = mock
            }else{
                this.showDatas = mock.filter((data)=>{
                    return data.sex == this.sexFilter
                })
            }
          },
          searchData(){
            this.sexFilter = -1
            if(this.searchKey.length == 0){
                this.showDatas = mock
            }else{
                this.showDatas = mock.filter((data)=>{
                    return data.name.search(this.searchKey) != -1
                })
            }
          }
        },
        mounted(){
            setTimeout(this.queryAllData, 3000)
        },
        watch :{
            sexFilter(oldValue, newValue){
                this.filterData()
            },
            searchKey(oldValue, newValue){
                this.searchData()
            }
        }
    })
    App.mount("#Application")
  </script>
</html>